<template>
  <div id="tree" ref="tree"></div>
</template>

<script>

import FamilyTree from '@balkangraph/familytree.js'

export default {

  name: 'tree',
  data() {
    return {
      nodes: [
        { id: 1, pids: [2], name: "Amber McKenzie",荣誉:"",生平:"6666",gender: "female", img: "https://cdn.balkan.app/shared/2.jpg"  },
        { id: 2, pids: [1], name: "蒋介石", gender: "male", img: "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E8%92%8B%E4%BB%8B%E7%9F%B3&step_word=&hs=0&pn=9&spn=0&di=7084067677328637953&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2304319447%2C2366557657&os=787617847%2C50244824&simid=4274548359%2C597418982&adpicid=0&lpn=0&ln=193&fr=&fmq=1653931446607_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Ftw.people.com.cn%2Fmediafile%2F200911%2F12%2FF200911121605381171513428.jpg%26refer%3Dhttp%3A%2F%2Ftw.people.com.cn%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1656523512%26t%3D2dde0a23a195d3b639cc8f7d56ee736f&fromurl=ippr_z2C%24qAzdH3FAzdH3Fpo_z%26e3Brj5rsj_z%26e3Bv54_z%26e3BvgAzdH3FBIGcAzdH3Fdm098AzdH3F8anmbc00_z%26e3Bip4s&gsm=a&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDcsMSwyLDYsNSw0LDgsOQ%3D%3D" },
        { id: 3, mid: 1, fid: 2, name: "Peter Stevens", gender: "male", img: "https://cdn.balkan.app/shared/m10/2.jpg" },
        { id: 4, mid: 1, fid: 2, name: "Savin Stevens", gender: "male", img: "https://cdn.balkan.app/shared/m10/1.jpg"  },
        { id: 5, mid: 1, fid: 2, name: "Emma Stevens", gender: "female", img: "https://cdn.balkan.app/shared/w10/3.jpg" }
      ]
    }
  },


  methods: {
    mytree: function(domEl, x) {
      this.family = new FamilyTree (domEl, {
        nodes: x,
        nodeBinding: {
          field_0: "name",
          img_0: "img",
          sp_0:"生平"
        },
        nodeTreeMenu: true,
      });
    }
  },
  mounted(){
    this.mytree(this.$refs.tree, this.nodes)
  }
}





</script>

<style scoped>
</style>




